<!DOCTYPE html>
<html lang="zh-CH">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            font-family: icomoon;
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        body {
            background-size: cover;
            background-color: #333;
        }

        .clock {
            position: absolute;
            top: 50%;
            height: 300px;
            width: 100%;
            margin-top: -150px;
        }

        .clock>ul {
            position: relative;
            width: 1600px;
            margin: 0 auto;
            height: 300px;
        }

        .clock>ul li {
            float: left;
            width: 362px;
            height: 300px;
            margin-right: -150px;
            line-height: 300px;
            text-align: center;
            font-size: 185px;
            color: white;
            font-weight: 200;
            font-family: "MingLiU";
        }

        .clock>ul span {
            color: white;
            font-size: 20px;
            display: none;
        }

        .clock>ul .up {
            display: block;
            position: absolute;
            top: 100px;
            left: 785px;
        }

        .clock>ul .down {
            display: block;
            position: absolute;
            top: 170px;
            left: 785px;
        }

        .clock>ul .sec1 {
            display: block;
            position: absolute;
            bottom: 100px;
            right: 375px;
            font-size: 37px;
            bottom: 70px;
            right: 420px;
        }

        .clock>ul .sec2 {
            font-size: 18px;
            display: block;
            position: absolute;
            bottom: 75px;
            right: 382px;
        }
    </style>
</head>

<body>
    <div class="clock">
        <ul>
            <li class="time1" style="margin-left:300px;">2</li>
            <li class="time2" style="margin-left: -50px;">4</li>
            <li class="time3" style="margin-left:50px;">0</li>
            <li class="time4" style="margin-left: -50px;">0</li>
            <span class="sec1">00</span>
            <span class="sec2">000</span>
            <span id="up">ʘ</span>
            <span id="down">ʘ</span>
        </ul>
    </div>

    <script>
        var time1 = document.querySelector('.time1');
        var time2 = document.querySelector('.time2');
        var time3 = document.querySelector('.time3');
        var time4 = document.querySelector('.time4');
        var sec1 = document.querySelector('.sec1');
        var up = document.querySelector('#up');
        var down = document.querySelector('#down')
        var getTime = function () {
            var date = new Date();
            var s1 = date.getSeconds();
            var h1 = date.getHours();
            var h2 = date.getHours();
            var m1 = date.getMinutes();
            var m2 = date.getMinutes();
            if (date.getHours() < 10) {
                h1 = 0;
            }
            else {
                h1 = h1 / 10;
                h2 = h2 % 10;
            }
            if (date.getMinutes() < 10) {
                m1 = 0;
            }
            else {
                m1 = m1 / 10;
                m2 = m2 % 10;
            }
            if (s1 < 10) {
                s1 = '0' + s1
            }
            time1.innerHTML = parseInt(h1);
            time2.innerHTML = parseInt(h2);
            time3.innerHTML = parseInt(m1);
            time4.innerHTML = parseInt(m2);
            sec1.innerHTML = s1;
            up.setAttribute("class", "up");
            down.setAttribute("class", "down");
        }
        var millionsec = function () {
            var date1 = new Date();
            var s2 = date1.getMilliseconds();
            var sec2 = document.querySelector('.sec2');
            if (s2 < 100 && s2 > 10) {
                s2 = '0' + s2;
            }
            if (s2 < 10) {
                s2 = '00' + s2;
            }
            sec2.innerHTML = s2;
        }
        var Delete = function () {
            up.setAttribute("class", "");
            down.setAttribute("class", "")
        }
        setInterval(getTime, 1000);
        setInterval(millionsec, 10);
        setInterval(Delete, 2000)
    </script>
</body>

</html>